<script setup lang='ts'>
interface Props {
  type?: 'light' | 'dark'
  disabled?: boolean
}
defineOptions({ name: 'AppSportsBaseButton' })
withDefaults(defineProps<Props>(), {
  type: 'light'
})
</script>

<template>
  <button class="sports-base-button" :class="[type, { disabled }]" :disabled="disabled">
    <slot />
  </button>
</template>

<style>
:root {
  --bc-sports-base-button-font-size: 14px;
  --bc-sports-base-button-font-weight: 590;
  --bc-sports-base-button-border-radius: 100px;
  --bc-sports-base-button-light-bg: #24EE89;
  --bc-sports-base-button-light-bg-hover: rgba(36, 238, 137, 0.75);
  --bc-sports-base-button-light-color: #000;
  --bc-sports-base-button-dark-bg: #3E4243;
  --bc-sports-base-button-dark-bg-hover: rgba(255, 255, 255, 0.2);
  --bc-sports-base-button-dark-color: #fff;
  --bc-sports-base-button-height: 42px;
}
</style>

<style lang='scss' scoped>
.sports-base-button {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--bc-sports-base-button-font-size);
  font-weight: var(--bc-sports-base-button-font-weight);
  text-transform: uppercase;
  border-radius: var(--bc-sports-base-button-border-radius);
  cursor: pointer;
  transition: all 0.5s ease;
  height: var(--bc-sports-base-button-height);
}

.disabled {
  cursor: not-allowed;
  pointer-events: none;
}

.light {
  background-color: var(--bc-sports-base-button-light-bg);
  color: var(--bc-sports-base-button-light-color);

  @media (hover: hover) and (pointer: fine) {
    &:hover {
      background: var(--bc-sports-base-button-light-bg-hover);
    }
  }
}

.dark {
  background-color: var(--bc-sports-base-button-dark-bg);
  color: var(--bc-sports-base-button-dark-color);
  --tg-base-icon: var(--bc-sports-base-button-dark-color);

  @media (hover: hover) and (pointer: fine) {
    &:hover {
      background: var(--bc-sports-base-button-dark-bg-hover);
    }
  }
}
</style>
